<template>
  <div class="systemsetup-projectstatus">
    <el-container class="projectstatus-box">
      <el-editable
        :data="tableData"
        :columns="columns"
        v-loading="getListLoading"
        :custom-attr="$TABLE_HEAD['systemSetup.jurisdiction.list']"
        height="200"
      >
        <template slot="default-status" slot-scope="scope">
          <span>{{ onlineState[scope.row.status] }}</span>
        </template>
        <template slot="default-operation" slot-scope="scope">
          <el-button size="small" type="text" @click="modify(scope)"
            >修改</el-button
          >
        </template>
      </el-editable>
      <!-- 分页插件 -->
      <el-pagination
        align="right"
        style="margin-top: 10px; display:block;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :page-sizes="page.PAGE_NUMBER"
        :page-size="page.size"
        :current-page="page.page"
        :layout="page.PAGINATION_LAYOUT"
        :total="page.total"
        class="pagination"
      />
      <!-- <el-dialog
        :title="this.ismodity ? '修改' : '新增'"
        :visible.sync="userInfoVisible"
        class="person-dialog-box"
        width="40%"
        @close="resetUserInfoForm"
      >
        <el-form
          ref="addForm"
          :model="addForm"
          inline
          label-width="160px"
          :rules="informationRules"
          class="addform"
        >
          <el-form-item prop="releaseStartTimeAt" label="上线开始时间">
            <el-date-picker
              v-model="addForm.releaseStartTimeAt"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="releaseEndTimeAt" label="发布结束时间">
            <el-date-picker
              v-model="addForm.releaseEndTimeAt"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="code" label="邀请码">
            <el-input placeholder="请输入邀请码" v-model="addForm.code" />
          </el-form-item>
          <el-form-item prop="promptMessage" label="提示信息">
            <el-input
              placeholder="请输入提示信息"
              v-model="addForm.promptMessage"
            />
          </el-form-item>
          <el-form-item prop="status" label="状态">
            <el-select v-model="addForm.status" placeholder="请选择">
              <el-option
                v-for="item in statusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input
              placeholder="请输入备注"
              v-model="addForm.remark"
              type="textarea"
              :rows="2"
              :autosize="{minRows: 2, maxRows: 4}"
              class="dialogtext"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="addSubmit" type="primary" class="addsubmitbtn"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog> -->
      <el-dialog
        :title="this.ismodity ? '修改' : '新增'"
        :visible.sync="userInfoVisible"
        width="440px"
        @close="resetUserInfoForm"
      >
        <div class="add-company-dialog">
          <el-form
            ref="addForm"
            :model="addForm"
            inline
            label-width="125px"
            :rules="informationRules"
            class="addform"
          >
            <el-form-item prop="releaseStartTimeAt" label="上线开始时间">
              <el-date-picker
                v-model="addForm.releaseStartTimeAt"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="releaseEndTimeAt" label="发布结束时间">
              <el-date-picker
                v-model="addForm.releaseEndTimeAt"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="code" label="邀请码">
              <el-input placeholder="请输入邀请码" v-model="addForm.code" />
            </el-form-item>
            <el-form-item prop="promptMessage" label="提示信息">
              <el-input
                placeholder="请输入提示信息"
                v-model="addForm.promptMessage"
              />
            </el-form-item>
            <el-form-item prop="status" label="状态">
              <el-select v-model="addForm.status" placeholder="请选择">
                <el-option
                  v-for="item in statusArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
              <el-input
                placeholder="请输入备注"
                v-model="addForm.remark"
                type="textarea"
                :rows="2"
                :autosize="{minRows: 2, maxRows: 4}"
                class="dialogtext"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="addSubmit" type="primary">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import {formatDate} from '@const/filter.js'
import {columns, onlineState, statusArr, informationRules} from './const'
import ElEditable from '@components/el-editable/door/index.vue'
import {formRules} from '../menuManagement/const'
import {
  PcReleaseConfigPageList,
  PcReleaseConfigsave,
  PcReleaseConfigGetById,
  PcReleaseConfigUpdate
} from '@const/api_staffCenter'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common.js'
import paginationMixin from '@mixins/paginationMixin.js'
import {hasIn} from 'lodash'
export default {
  data() {
    return {
      pickerOptionsStart: {
        disabledDate: this.processingStartTime()
      },
      pickerOptionsEnd: {
        disabledDate: this.processingEndTime()
      },
      informationRules, // 定义必填项
      statusArr, // 状态枚举
      columns,
      getListLoading: false,
      tableData: [],
      onlineState, // 表格状态映射枚举
      page: {
        PAGINATION_LAYOUT,
        PAGE_NUMBER
      },
      userInfoVisible: false, // 弹框显示或隐藏
      addForm: {
        releaseStartTimeAt: '', // 上线开始时间
        releaseEndTimeAt: '', // 发布结束时间
        code: '', //邀请码
        promptMessage: '', // 提示信息
        status: '', // 状态
        remark: '' //备注
      },
      ismodity: false // 是否是修改状态默认false
    }
  },
  mixins: [paginationMixin],
  created() {
    this.getItems()
    this.initNavButtons()
  },
  components: {
    ElEditable
  },
  methods: {
    processingStartTime() {
      if (!this.ismodity) {
        return time => {
          let endDateVal = this.addForm.releaseEndTimeAt
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
          return Date.now() > time.getTime() + 1000 * 60 * 60 * 24 * 1
        }
      } else {
        return {}
      }
    },
    processingEndTime() {
      if (!this.ismodity) {
        return time => {
          let beginDateVal = this.addForm.releaseStartTimeAt
          if (beginDateVal) {
            return (
              time.getTime() < new Date(beginDateVal).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            )
          } else {
            return time.getTime() + 1000 * 60 * 60 * 24 * 1 < Date.now()
          }
        }
      } else {
        return {}
      }
    },
    // 初始化左上角按钮
    initNavButtons() {
      let arr = [{type: 'primary', val: '新增', handle: this.addList}]
      const btn = {
        type: 'btn',
        arr: arr
      }
      this.$store.commit('changeLayoutHandle', btn)
    },
    // 点击修改获取列表详情
    modify(scope) {
      this.ismodity = true
      this.userInfoVisible = true
      this.$axios({
        method: 'get',
        url: PcReleaseConfigGetById,
        params: {
          id: scope.row.id
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        this.addForm = {
          releaseStartTimeAt: obj.releaseStartAt, // 上线开始时间
          releaseEndTimeAt: obj.releaseEndAt, // 发布结束时间
          code: obj.code, //邀请码
          promptMessage: obj.promptMessage, // 提示信息
          status: obj.status, // 状态
          remark: obj.remark, //备注
          releaseConfigId: obj.releaseConfigId
        }
      })
    },
    // 点击新增让弹框显示
    addList() {
      this.userInfoVisible = true
    },
    // 获取表格数据
    getItems() {
      this.getListLoading = true
      this.$axios({
        method: 'get',
        url: `${PcReleaseConfigPageList}?page=${this.page.page}&size=${this.page.size}`
      })
        .then(res => {
          let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
          this.tableData = obj.content
          this.page.total = obj.totalElements
        })
        .finally(() => {
          this.getListLoading = false
        })
    },
    // 点击重置
    resetUserInfoForm() {
      this.$refs.addForm.resetFields()
      this.ismodity = false
      this.pickerOptionsStart = {}
      this.pickerOptionsEnd = {}
    },
    // 判断开始时间是否小于当前时间
    inspectionTime() {
      if (new Date(this.addForm.releaseStartTimeAt).getTime() < Date.now()) {
        return false
      }
      return true
    },
    // 新增或修改
    addSubmit(id) {
      // if (!this.inspectionTime()) {
      //   this.$message({type: 'warning', message: '开始时间不能小于当前时间！'})
      //   return
      // }
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          if (!this.ismodity) {
            this.$axios({
              method: 'post',
              url: PcReleaseConfigsave,
              data: {
                ...this.addForm,
                releaseStartAt: formatDate(
                  this.addForm.releaseStartTimeAt,
                  'YYYY-MM-DD HH:mm:ss'
                ),
                releaseEndAt: formatDate(
                  this.addForm.releaseEndTimeAt,
                  'YYYY-MM-DD HH:mm:ss'
                )
              }
            }).then(res => {
              if (Number(res.data.code) === 0) {
                this.userInfoVisible = false
                this.$message({type: 'success', message: '新增成功！'})
                this.getItems()
              }
            })
          } else {
            this.$axios({
              method: 'post',
              data: {
                ...this.addForm,
                releaseConfigId: this.addForm.releaseConfigId,
                releaseStartAt: formatDate(
                  this.addForm.releaseStartTimeAt,
                  'YYYY-MM-DD HH:mm:ss'
                ),
                releaseEndAt: formatDate(
                  this.addForm.releaseEndTimeAt,
                  'YYYY-MM-DD HH:mm:ss'
                )
              },
              url: PcReleaseConfigUpdate
            }).then(res => {
              if (Number(res.data.code) === 0) {
                this.userInfoVisible = false
                this.$message({type: 'success', message: '修改成功！'})
                this.getItems()
              }
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.systemsetup-projectstatus {
  height: 100%;
  display: flex;

  .projectstatus-box {
    flex-direction: column;
    .el-form-item__label {
      width: 110px !important;
      text-align: left;
    }
    .addform {
      position: relative;
      .addsubmitbtn {
        position: absolute;
        bottom: -76px !important;
        left: 140px !important;
      }
      .dialogtext {
        width: 215px;
      }
    }

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
.add-company-dialog {
  text-align: center;
  width: 100%;
  // height: 500px;
  display: flex;
  flex-direction: column;

  .dialog-checked-all {
    margin: 16px 0;
  }
  .el-radio-group {
    margin-top: 20px;
  }
  .checkbox-box {
    flex: 1;
    overflow: auto;

    .el-radio {
      display: block;
      margin-left: 20px;
      margin-bottom: 10px;
    }
  }
}
</style>
